<template>
  <div id="login">
    <div class="part-one">
      <div></div>
    </div>

    <div class="window">
      <div class="logo-name" style="margin-top: 30px; margin-left: 30px">
        <img
          src="https://tm-image.qichacha.com/fa479d6edaf200c15fef3bb08456dbc0.jpg"
          style="width: 40px; height: 40px"
          alt=""
        />
        <span>IT教育</span>
      </div>

      <div
        class="public-address"
        style="color: gray; margin: 20px 30px; cursor: pointer"
      >
        手机号
      </div>
      <div style="margin: 10px 30px; display: flex; display: -webkit-flex">
        <el-input v-model="phoneNum" type="text" maxlength="11" show-word-limit>
        </el-input>
      </div>

      <div class="public-address" style="color: gray; margin: 20px 30px">
        验证码
      </div>

      <div style="margin: 10px 30px; display: flex; display: -webkit-flex">
        <span
          style="
            background-color: rgba(0, 0, 0, 0.1);
            color: gray;
            line-height: 40px;
            padding: 0px 10px;
            border-radius: 2px;
          "
          ><i class="el-icon-key"></i
        ></span>
        <el-input
          v-model="verifyCode"
          type="text"
          placeholder="请输入8位验证码"
          maxlength="8"
          show-word-limit
        >
        </el-input>
      </div>

      <div class="login-bottom">
        <span style="font-size: 20px; color: grey"
          >没有有账户？<el-link style="font-size: 20px" type="primary"
            >登录立即注册</el-link
          ></span
        >
        <span
          class="login-btn"
          :class="verifyCode.length == 8 ? '' : 'no-public-address'"
          >登录</span
        >
      </div>
    </div>

    
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      verifyCode: "",
      phoneNum: "13188293883",
    };
  },
};
</script>

<style scoped>
#login {
  height: 100vh;
}

#login .part-one div {
  width: 0;
  height: 0;
  border-left: 350px solid #fff;
  border-bottom: 280px solid transparent;
}

#login .part-one {
  float: right;
  width: 50%;
  height: 500px;
  background-color: #409eff;
  position: relative;
  overflow: hidden;
  z-index: -1;
}

#login .part-one::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  border-width: 10px 0px 400px 1100px;
  border-style: solid;
  border-color: transparent transparent white transparent;
  width: 0;
  height: 0;
  z-index: 1;
}

#login .window {
  position: absolute;
  width: 33%;
  top: 180px;
  left: 33%;
  background-color: #fff;
  border-radius: 10px;
  cursor: pointer;
}

#login .footer{
    width: 100%;
    position: absolute;
    top: 100vh;
}
#login .window:hover {
  box-shadow: 0 5px 5px #80808080;
}

#login .window .logo-name {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}

#login .window .logo-name span {
  margin-left: 10px;
  font-size: large;
}

#login .window .login-bottom {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  border-top: 1px solid #d8d8d8;
  padding: 10px 30px;
  height: 100px;
  margin-top: 30px;
  align-items: center;
}

#login .window .login-bottom .login-btn {
  background-color: #1b85d6;
  padding: 13px 25px;
  color: white;
  border-radius: 30px;
  cursor: pointer;
}

#login .window .login-bottom .no-public-address {
  background-color: #1b85d692;
  cursor: not-allowed;
}
</style>